<template>
<div>
  <div id="detail" class="height: 80%; weight: 80%"></div>
</div>
</template>

<script>
export default {
  name: 'Detail',
  data () {
    return {
      fiveDay: [
      ]
    }
  },
  created () {
    this.getData()
  },
  mounted () {
    document.getElementById('detail').style.height = window.screen.availHeight * 0.005 + 'px'
    this.$nextTick(() => {
      this.getData()
    })
    window.addEventListener('resize', () => {
      this.$echarts.init(document.getElementById('detail')).resize()
    })
  },

  methods: {
    getData () {
      let that = this
      this.$axios
        .post('/detail', {name: that.$route.params.id}).then((Response) => {
          that.fiveDay = Response.data.data
          this.$options.methods.drawBar.bind(this)()
        })
        .catch((failResponse) => {
          console.log(failResponse)
        })
    },
    convertDate () {
      let res = []
      for (let i = 0; i < this.fiveDay.length; i++) {
        let date = this.fiveDay[i].date
        if (date) {
          res = date
        }
      }
      console.log('date')
      console.log(res)
      console.log('date')
      console.log([1, 2, 3, 4, 5])
      return res
    },
    convertData (tmp) {
      let res = []
      for (let i = 0; i < this.fiveDay.length; i++) {
        let pm = this.fiveDay[i][tmp]
        if (pm) {
          res = pm
        }
      }
      console.log(tmp)
      console.log(res)
      return res
    },
    drawBar () {
      let detailContainer = document.getElementById('detail')
      let resizeDetailContainer = function () {
        detailContainer.style.width = document.body.offsetWidth + 'px'
        detailContainer.style.height = window.screen.availHeight + 'px'
      }
      resizeDetailContainer()
      // 基于准备好的dom，初始化echarts实例
      let detail = this.$echarts.init(detailContainer)
      let optionMap = {
        title: {
          text: '折线图堆叠'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['AQI', 'PM2.5', 'PM10', 'SO₂', 'O₃', 'CO', 'NO₂']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.convertDate()
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: 'AQI',
            type: 'line',
            data: this.convertData('aqi')
          },
          {
            name: 'PM2.5',
            type: 'line',
            data: this.convertData('pm2_5')
          },
          {
            name: 'PM10',
            type: 'line',
            data: this.convertData('pm10')
          },
          {
            name: 'SO₂',
            type: 'line',
            data: this.convertData('so2')
          },
          {
            name: 'O₃',
            type: 'line',
            data: this.convertData('o3')
          },
          {
            name: 'CO',
            type: 'line',
            data: this.convertData('co')
          },
          {
            name: 'NO₂',
            type: 'line',
            data: this.convertData('no2')
          }
        ]
      }
      detail.setOption(optionMap)
    }
  }
}
</script>

<style>

</style>
